<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <div>
          <Button type="primary" icon="md-add" @click="add()" v-if="Validation.check(Resources.ROLE_ADD)">新增角色
          </Button>
        </div>
<!--        <CompanySelector-->
<!--          style="width: 180px;margin-right: 10px"-->
<!--          :tagCount="1"-->
<!--          :companyId="bloc.form.companyId"-->
<!--          @on-change="value=>bloc.form.companyId=value" v-if="Validation.isRootCompany"></CompanySelector>-->
        <Input placeholder="请输入角色名称" v-model="bloc.form.name" style="width: 180px;margin-right: 10px"/>
        <Button type="primary" icon="ios-search" style="margin-right: 10px" size="default"
                @click="bloc.load(1, 15)">查询
        </Button>
        <Button icon="md-refresh" style="margin-right: 10px" size="default" @click="bloc.reset()">重置</Button>
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <!--            <Button size="small" type="info"-->
            <!--                    @click="bloc.changeAddModal()">添加人员-->
            <!--            </Button>-->
            <Button size="small" type="info" @click="edit(row.id)" v-if="Validation.check(Resources.ROLE_UPDATE)">
              编辑
            </Button>
            <Button size="small" type="warning" @click="modifyItem(row)"
                    v-if="Validation.check(Resources.ROLE_UPDATE_RES)">
              设置权限
            </Button>
            <Button size="small" type="warning" @click="removeItem(row)"
                    v-if="Validation.check(Resources.ROLE_DELETE)">
              删除
            </Button>
          </div>
        </template>
        <template slot-scope="{ row }" slot="accountNum">
          <!--          <span @click="bloc.changeAccountNumModal()">{{bloc.getAccountNum(row.id)}}</span>-->
          <span>{{bloc.getAccountNum(row.id)}}</span>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="val=>bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
    <FormAddModal
      :showAddModal="bloc.isShowAddModal"
      idx=""
      @closeModal="bloc.changeAddModal()"></FormAddModal>
    <AccountNumModal
      :showAccountNumModal="bloc.isShowAccountNumModal"
      @closeModal="bloc.changeAccountNumModal()"></AccountNumModal>

    <Modal
      :title="formId === 0 ? '新增角色' : '修改角色信息'"
      width="600px"
      :footer-hide=true
      v-model="roleController.visible"
      :closable="false"
      :mask-closable="false"
      @on-ok="args=>roleController.resolve(args)"
      @on-cancel="args=>roleController.resolve(args)">
      <FormRoleModal
        ref="roleForm"
        @on-ok="args=>roleController.resolve(args)"
        @on-cancel="args=>roleController.resolve(args)"/>
    </Modal>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {Route} from 'vue-router';
  import {ListBloc} from '@/view/role/bloc/ListBloc';
  import {Role} from '@/base/model/Role';
  import FormAddModal from '@/view/role/FormAddModal.vue';
  import FormRoleModal from '@/view/role/FormRoleModal.vue';
  import AccountNumModal from '@/view/role/AccountNumModal.vue';
  import {formatDate} from '@/base/util/Dates';
  import CompanySelector from '@/component/CompanySelector.vue';
  import {Validation} from '@/base/Validation';
  import {ModalController} from '@/base/util/ModalController';
  import {FormRoleBloc} from '@/view/role/bloc/FormRoleBloc';
  import {Resources} from '@/base/Resources';

  const getColumns = (bloc: ListBloc) => [
    {
      title: '角色名称',
      key: 'name',
      align: 'left',
      minWidth: 100,
      tooltip: true
    },
    {
      title: '成员数量',
      slot: 'accountNum',
      align: 'left',
      minWidth: 100,
      tooltip: true
    },
    {
      title: '角色描述',
      key: 'description',
      align: 'left',
      minWidth: 100,
      tooltip: true
    },
    {
      title: '创建时间',
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(new Date(params.row.created), 'yyyy-MM-dd hh:mm:ss')
          }
        });
      },
      width: 160,
      align: 'left',
      tooltip: true
    },
    {
      title: '更新时间',
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(new Date(params.row.updated), 'yyyy-MM-dd hh:mm:ss')
          }
        });
      },
      width: 160,
      align: 'left',
      tooltip: true
    },
    {
      title: '操作',
      slot: 'action',
      width: (47 * 2) + (61 * 0) + (75 * 1) + 20,
      align: 'left',
      fixed: 'right'
    }
  ];

  @Component({
    components: {
      FormAddModal, FormRoleModal, CompanySelector, AccountNumModal
    }
  })
  export default class extends Vue {
    beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
      next(vm => {
        vm.bloc.load(1, 15).catch(e => {
          vm.$Message.error('操作错误');
        });
      });
    }

    formId = 0;
    bloc: ListBloc = new ListBloc();
    columns = getColumns(this.bloc);
    Validation = Validation;
    Resources = Resources
    roleController = new ModalController(this);

    $refs!: {
      roleForm: FormRoleModal & {
        bloc: FormRoleBloc
      }
    };

    removeItem(dataItem: Role) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除后将无法恢复！还要继续吗？',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          this.bloc.removeItem(dataItem).then(value => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          }).then(() => {
            this.$Message.success('删除成功');
          }).catch(err => {
            this.$Message.error(err.message || '删除失败');
          });
        }
      });
    }

    modifyItem(dataItem: Role) {
      this.$router.replace(`/role/${dataItem.id}`);
    }

    add() {
      this.formId = 0;
      this.$refs.roleForm.bloc.reset();
      this.$refs.roleForm.bloc.load(0);
      this.roleController.request(true).then(value => {
        this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
        this.roleController.visible = false;
      }).catch(e => {
        console.error(e);
      });
    }

    edit(id: number) {
      this.formId = id;
      this.$refs.roleForm.bloc.load(id);
      this.roleController.request(true).then(value => {
        this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
        this.roleController.visible = false;
      }).catch(e => {
        console.error(e);
      });
    }

  }
</script>

<style lang="less">

</style>
